<template>
  <div>
    <!--<div class="feature" v-for="focus in blogList">-->
        <!--<router-link :to="`/article/1`">-->
            <!--<div class="feature-title"><span class="foverlay">{{focus.recommend}}</span></div>-->
            <!--<img :src="focus.banner">-->
        <!--</router-link>-->
    <!--</div>-->
    <div class="feature">
      <div>
      <router-link :to="`/article/1`">
        <div class="feature-title"><span class="foverlay">{{blogList[0].recommend}}</span></div>
        <img :src="blogList[0].banner">
      </router-link>
      </div>
      <div style="margin-left: 270px;margin-top: -166px">
      <router-link :to="`/article/1`">
        <div class="feature-title"><span class="foverlay">{{blogList[1].recommend}}</span></div>
        <img :src="blogList[1].banner">
      </router-link>
      </div>
      <div style="margin-left: 540px;margin-top: -166px">
        <router-link :to="`/article/1`">
          <div class="feature-title"><span class="foverlay">{{blogList[2].recommend}}</span></div>
          <img :src="blogList[2].banner">
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
			name: "feature",
      data(){
				return{
					blogList: [{
						id: 0,
						type: '',
            recommend: '',
            banner: ''
					}
					]
        }
      },
      created() {
				this.getRecommendBlogList()
      },
      methods: {
				getRecommendBlogList(){
            var vm = this
            vm.axios({
              method: 'GET',
              url: this.GLOBAL.baseURL + 'blog/recommend/focus',
            }).then(function (resp) {
              if (resp.data.status === 'ok') {
                vm.blogList = resp.data.list
              } else {
                vm.$message({
                  message: '更新焦点文章失败!',
                  type: 'error',
                  center: true
                });
              }
            })
          }
        }
		}
</script>

<style scoped lang="less">
    .feature {
        width: inherit;
        position: relative;
        img {
            height: 160px;
            width: 257px;
            object-fit: cover;
            border-radius: 5px;
        }
        & a:hover .foverlay{
            opacity:1;
        }
        .foverlay {
            position: absolute;
            z-index: 2;
            width: 257px;
            height: 160px;
            text-align: center;
            line-height: 160px;
            background: #BBE2DB;
            color: white;
            font-size: 16px;
            opacity: 0;
            border-radius: 5px;

            -moz-transition: opacity .4s ease-out;
            -o-transition: opacity .4s ease-out;
            -webkit-transition: opacity .4s ease-out;
            transition: opacity .4s ease-out;
        }
    }
</style>
